<template>
    <div class="card-box">
        <div class="card-title">
            <span>关联物业</span>
             <el-col :span="2" v-show='showButton'>
                <el-button type="text" @click="addRow">新增</el-button>  |<el-button  type="text" @click="delRow">删除</el-button>
            </el-col>

        </div>
        <div class="margin-box">
            <el-table :data="commitSelectRow" align="center"  @selection-change="changeSelect">
                <el-table-column type="selection" width="80"></el-table-column>
                <el-table-column label="序号" width="100" type="index"></el-table-column>
                <el-table-column label="物业名称" prop="propertyName"></el-table-column>
                <el-table-column label="建筑面积" prop="buildingArea"></el-table-column>
                <el-table-column label="建构价值" prop="suggestPrice"></el-table-column>
            </el-table>
        </div>

        <v-dialog
            title="选择物业信息"
            :show.sync="dialogVisible"
            :closeOnClickModal="false"
            @beforeClose="beforeClose"
            width="800px">
            <div style="padding: 5px">
                <list-page
                    class="box-shadow"
                    :pager="pager"
                    :showSelectSearch="false"
                    placeholder="请输入物业名称"
                    @searchByKey="searchByKey"
                    @selectionChange="selectionChange"
                    @changePageSize="changePageSize"
                    @changeCurrentPage="changeCurrentPage">
                    <template slot="table">
                        <el-table
                            :data="roomData"
                            align="center"
                            @selection-change="selectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" label="序号" width="55"></el-table-column>
                            <el-table-column label="物业名称" prop="propertyName"></el-table-column>
                            <el-table-column label="价值" prop="suggestPrice"></el-table-column>
                            <el-table-column label="建筑面积" prop="buildingArea"></el-table-column>
                            <el-table-column label="地址" prop="address"></el-table-column>
                        </el-table>
                    </template>
                </list-page>
            </div>
            <span slot="foot">
                <el-button @click="cancel()">取 消</el-button>
                <el-button @click="commit">保 存</el-button>
            </span>
        </v-dialog>

    </div>


</template>

<script>
    import {getRooms} from '../api/propertietar'
    import pager from "@/assets/js/page-mixin";
    import {queryPage} from '@/views/property-info-sys/property-manage/api/room.js'
    import BaseLoad from '@/assets/vue-mixin/BaseLoad'
    export default {
        name: "relevancy_property",
        mixins: [pager, BaseLoad],
        props: {
            pid: {
                type: String
            },
            showButton: {
                type: Boolean,
                default: true
            },
            projectId:{
                type: String,
                default: ''
            }
        },
        mounted() {
            if(this.pid){
                getRooms(this.pid).then(rep => {
                    this.commitSelectRow = rep.data.data
                })
            }
        },
        data() {
            return {
                commitSelectRow: [],
                tempSelectRow: [],
                deleteRow: [],
                propertyName: '',
                pager: pager,
                roomData: [],
                dialogVisible: false
            }
        },
        methods: {
            addRow(){
                if(this.projectId == ''){
                    this.$alert('请先选择所属项目', '提示', {
                        confirmButtonText: '确定',
                    });
                    return false;
                }
                this.roomQuery();
                this.dialogVisible = true
            },
            selectionChange(row){
                //追加
                this.tempSelectRow = row
            },
            changeSelect(row){
                this.deleteRow = row
            },
            delRow(){
                let tempIds = this.deleteRow.map(sd => sd.roomId)
                this.commitSelectRow = this.commitSelectRow.filter(rp => tempIds.indexOf(rp.roomId) === -1)
                // this.deleteRow = []

            },
            beforeClose(done) {
                this.cancel()
                done()
            },
            cancel() {
                this.tempSelectRow = []
                this.dialogVisible = false
            },
            commit(){
                this.commitSelectRow = this.commitSelectRow.concat(this.tempSelectRow)
                this.cancel()
            },
            searchByKey(val){
                console.log(val)
                this.propertyName = val
                this.roomQuery();
            },
            roomQuery(){
                let queryDont = this.commitSelectRow.map(ro => {
                    return ro.roomId
                })
                this.loadAction('数据加载中')
                queryPage(Object.assign({
                    current: pager.currentPage,
                    size: pager.pageSize,
                    dontUse: 'true',
                    allQuery: 'true',
                    dontQueryId: queryDont,
                    projectId: this.projectId,
                    propertyOwnership: [10]
                }, {propertyName: this.propertyName})).then(rep => {
                    if(rep.data.code === 0){
                        let repD = rep.data.data
                        this.roomData = repD.records
                        this.pager.total = repD.total
                    }
                    this.loadClose()
                }).catch(e => {
                    this.loadClose()
                })
            },
            changePageSize(size){
                this.pager.pageSize = size
                this.roomQuery();
            },
            changeCurrentPage(page){
                this.pager.currentPage = page
                this.roomQuery();
            },
            //重置列表，发生在项目ID发送改变时
            resetSelect(){
                this.commitSelectRow = []
                this.tempSelectRow = []
                this.deleteRow = []
                this.roomData = []
            }


        },
        watch: {
            projectId: function (newVal, oldVal) {
                if(oldVal != null && oldVal != ''){
                    this.resetSelect();
                }
            }
        }
    }
</script>

